<template>
  <view class="benefit">
    <u-toast ref="uToast"></u-toast>
    <view style="width: 400rpx" class="benefit_tab">
      <u-tabs-swiper
        ref="uTabs"
        :list="itemTabs"
        :current="current"
        @change="change"
        :is-scroll="false"
        swiperWidth="750"
      ></u-tabs-swiper>
    </view>
    <swiper
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
    >
      <swiper-item
        class="swiper-item"
        v-for="(item, index) in benefitData"
        :key="index"
      >
        <u-grid
          :border="true"
          col="2"
          hover-class="hover-class"
          class="benefit__grid"
        >
          <u-grid-item @click="goBenefit()">
            <text>
              {{
                swiperCurrent == 0
                  ? '今日收益（元）'
                  : swiperCurrent == 1
                  ? '昨日收益（元）'
                  : swiperCurrent == 2
                  ? '本月收益（元）'
                  : ''
              }}
            </text>
            <text class="grid-text">{{ item.incomeAmount }}</text>
          </u-grid-item>
          <u-grid-item @click="gotrade()">
            <!-- <text>{{ item.tradeTitle }}</text> -->
            <text>
              {{
                swiperCurrent == 0
                  ? '今日交易（元）'
                  : swiperCurrent == 1
                  ? '昨日交易（元）'
                  : swiperCurrent == 2
                  ? '本月交易（元）'
                  : ''
              }}
            </text>
            <text class="grid-text">{{ item.transAmount }}</text>
          </u-grid-item>
          <u-grid-item @click="goNewMerchant()">
            <!-- <text>{{ item.newMerchant }}</text> -->
            <text>
              {{
                swiperCurrent == 0
                  ? '今日新增（户）'
                  : swiperCurrent == 1
                  ? '昨日新增（户）'
                  : swiperCurrent == 2
                  ? '本月新增（户）'
                  : ''
              }}
            </text>
            <text class="grid-text">{{ item.merchantCount }}</text>
          </u-grid-item>
          <u-grid-item @click="goNewActive()">
            <!-- <text>{{ item.newActive }}</text> -->
            <text>
              {{
                swiperCurrent == 0
                  ? '今日激活（台）'
                  : swiperCurrent == 1
                  ? '昨日激活（台）'
                  : swiperCurrent == 2
                  ? '本月激活（台）'
                  : ''
              }}
            </text>
            <text class="grid-text">{{ item.activeCount }}</text>
          </u-grid-item>
        </u-grid>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { baseURL } from '@/config.js';

export default {
  props: {},
  data() {
    return {
      itemTabs: [
        {
          name: '今日',
        },
        {
          name: '昨日',
        },
        {
          name: '本月',
        },
      ],
      current: 0,
      swiperCurrent: 0,
      benefitData: [],
      // webviewStyles: {
      //   progress: {
      //     color: '#FF3333',
      //   },
      // },
    };
  },
  mounted() {
    this.getBenefitData();
  },
  // 页面显示时触发
  onShow() {
    // 首页收益数据
    this.getBenefitData();
    // 切换收益数据
    this.animationfinish();
  },
  onLoad() {},
  methods: {
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 切换收益数据
    animationfinish(e) {
      // console.log('e----->', e);
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
      // console.log('this.current----->159', this.current);
      this.current == 0
        ? this.benefitData.today
        : this.current == 1
        ? this.benefitData.yesterday
        : this.current == 2
        ? this.benefitData.week
        : this.benefitData.today;
      // console.log('this.benefitData.today----->', this.benefitData.today);
    },
    click(item) {
      console.log('item----->137', item);
    },
    change(index) {
      this.swiperCurrent = index;
      console.log('index----->', index);
    },
    // 今日收益
    goBenefit() {
      const token = uni.getStorageSync('token');
      this.$u.route({
        // url: `pages/benefit/benefitFilterStatistic/shouyitongji?url=${baseURL}/h5/index.html#/incomeStatistics?loginToken=${token}&type=userRole`,
        // url: `pages/benefit/benefitFilterStatistic/shouyitongji?url=https://agent.dev.lsjzg.com/api/h5/index.html#/incomeStatistics?loginToken=${token}&type=userRole`,
        url: `pages/benefit/benefitFilterStatistic/shouyitongji?url=https://agent.lsjzg.com/api/h5/index.html#/incomeStatistics?loginToken=${token}&type=userRole`,
      });
    },
    gotrade() {
      this.$u.route('pages/main/trade/trade-list');
    },
    goNewMerchant() {
      uni.switchTab({
        url: '/pages/benefit/benefit-home',
      });
    },
    goNewActive() {
      this.$u.route('pages/main/terminal/activeStatistic');
    },
    // 首页收益数据
    getBenefitData() {
      // const _self = this;
      this.$zx.user_api.getHomeData().then((data) => {
        console.log('getHomeData----->113', data);
        // 赋值给benefitData
        this.benefitData = data;
        // this.$set(data.today, `incomeTitle`, '今日收益（元）');
        // this.$set(data.today, `tradeTitle`, '今日交易（元）');
        // this.$set(data.today, `newMerchant`, '今日新增（户）');
        // this.$set(data.today, `newActive`, '今日激活（台）');
        // _self.benefitData.push(data.today);
        // this.$set(data.yesterday, `incomeTitle`, '昨日收益（元）');
        // this.$set(data.yesterday, `tradeTitle`, '昨日交易（元）');
        // this.$set(data.yesterday, `newMerchant`, '昨日新增（户）');
        // this.$set(data.yesterday, `newActive`, '昨日激活（台）');
        // _self.benefitData.push(data.yesterday);
        // this.$set(data.week, `incomeTitle`, '本月收益（元）');
        // this.$set(data.week, `tradeTitle`, '本月交易（元）');
        // this.$set(data.week, `newMerchant`, '本月新增（户）');
        // this.$set(data.week, `newActive`, '本月激活（台）');
        // _self.benefitData.push(data.week);
        // console.log('_self' + JSON.stringify(_self.benefitData));
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.benefit {
  background-color: white;
  height: 450rpx;
  padding: 20rpx;
  // &__grid {
  //   border-radius: 20rpx;
  // }
}

.grid-text {
  font-size: 16px;
  color: red;
  // padding: 10rpx 0 20rpx 0rpx;
  font-weight: bold;
  box-sizing: border-box;
}
</style>
